@import "ui-variables";


.icon-tab( @extension: ''; @type: ''; @font: 20px; @top: 6px; @right: -3px; @left: -5px; @offset: -6px) {

  tabs-bar tabs-tab .title[data-name$="@{extension}"], .tab-bar .tab .title[data-name$="@{extension}"] {
    position: relative;
    display: inline-block;
    top: @offset;
    padding: 0;

    &:before {
      font-family: icomoon;
      content: "@{icon-@{type}}";
      font-size: @font;
      position: relative;
      top: @top;
      left: @left;
      margin-right: @right;
      color: ~"@{color-@{type}}";
    }
  }

  tabs-bar tabs-tab.active .title[data-name$="@{extension}"], tab-bar .tab.active .title[data-name$="@{extension}"] {
    top: @offset;
  }

}

.icon-tree( @extension: ''; @type: ''; @font: 20px; @top: 6px; @right: 0px; @left: -5px; @offset: -6px) {

  .name.icon[data-name$="@{extension}"] {

    position: relative;
    display: inline-block;
    top: @offset;
    padding: 0;

    &.icon-file-text, &.icon-file-media, &.icon-book {
      &:before {
        font-family: icomoon;
        content: "@{icon-@{type}}";
        font-size: @font;
        position: relative;
        top: @top;
        left: @left;
        margin-right: @right;
        color: ~"@{color-@{type}}";
      }
    }

  }


}

.text(normal) {
  font-weight: normal;
  color: @text-color;
}
.text(subtle) {
  font-weight: normal;
  color: @text-color-subtle;
}
.text(highlight) {
  font-weight: normal;
  color: @text-color-highlight;
}
.text(selected) {
  .text(highlight)
}

.text(info) {
  color: @text-color-info;
}
.text(success) {
  color: @text-color-success;
}
.text(warning) {
  color: @text-color-warning;
}
.text(error) {
  color: @text-color-error;
}

.focus() {
  outline: none;
  border-color: @base-accent-color;
  box-shadow: 0 0 0 1px @base-accent-color;
}
